<template>
    <Header />
    <el-container class="container">
        <el-aside width="200px" class="sidebar">
            <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
                <el-menu-item index="1">
                    个人中心
                </el-menu-item>
                <el-menu-item index="2">
                    美食发布管理
                </el-menu-item>
                <el-menu-item index="3">
                    食谱发布管理
                </el-menu-item>
            </el-menu>
        </el-aside>

        <el-main class="main-content">
            <component :is="currentComponent"></component>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref, markRaw } from 'vue';
import Header from '~/components/Header.vue';
import Foodlist from '~/components/users/Foodlist.vue';
import Recipelist from '~/components/users/Recipelist.vue';
import User from '~/components/users/User.vue';

const currentComponent = ref(markRaw(User));

const handleSelect = (index) => {
    switch (index) {
        case '1':
            currentComponent.value = markRaw(User);
            break;
        case '2':
            currentComponent.value = markRaw(Foodlist);
            break;
        case '3':
            currentComponent.value = markRaw(Recipelist);
            break;
        default:
            currentComponent.value = markRaw(User);
            break;
    }
};
</script>

<style scoped>
.container {
    width: 1024px;
    margin: 20px auto ;
    overflow: hidden;
    display: flex;
    gap: 20px;
    /* 增加侧边栏和主内容区域之间的间距 */
    align-items: flex-start;
    /* 使侧边栏和主内容区域从顶部开始对齐 */
}

.sidebar {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
    height: fit-content;
    /* 使侧边栏高度根据内容自适应 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {

    border-right: none;
    /* 移除了 min-height: 400px; */
}

.main-content {
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    transition: all 0.3s ease;
    /* 移除了 flex-grow: 1; */
}

.el-menu-item {
    color: #333;
}

.el-menu-item.is-active {
    background-color: #ecf5ff;
    color: #409eff;
}
</style>